<template>
  <div class="warp">
    <div class="title-bar">
      <img class="icon" :src="iconDevice" />
      <div class="title">告警类型</div>
    </div>
    <div class="content">
      <div class="box">
        <div>
          <span>{{smokeAlarm}}</span>
          <span>烟感告警</span>
        </div>
        <div id="myEchart2"></div>
        <div>
          <span>{{fireHydrantAlarm}}</span>
          <span>消防告警</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['personList'],
  data () {
    return {
      iconDevice: require('../../assets/images/jialey/icon/alarm-type.png'),
      iconSmokeDetector: require('../../assets/images/jialey/icon/icon-yangan.png'),
      iconFireHydrant: require('../../assets/images/jialey/icon/icon-xiaofangshuan.png'),
      smokeAlarm: 0, // 烟感告警
      fireHydrantAlarm: 0, // 消防告警
      alarmList: [],
      chart: null
    }
  },
  computed: {
    ...mapState({
      alarmCount: state => state.event.alarmCount
    })
  },
  watch: {
    alarmCount (val) {
      this.handleGetAlarmList()
    }
  },
  mounted () {
    this.handleGetAlarmList()
  },
  methods: {
    initEchart () {
      const option = {
        tooltip: {
          show: true,
          trigger: 'item'
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            // silent: true,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: function (argument) {
                  let html = `累计告警\n统计比例`
                  return html
                },
                textStyle: {
                  fontSize: 12,
                  color: '#96BAFA'
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: 'rgba(43, 54, 72, 0.95)'
              }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [
              {
                name: '烟感告警',
                value: this.smokeAlarm,
                itemStyle: {
                  color: '#B7E986'
                }
              },
              {
                name: '消防告警',
                value: this.fireHydrantAlarm,
                itemStyle: {
                  color: '#F77D18'
                }
              }
            ]
          }
        ]
      }
      this.chart = this.$echarts.init(document.getElementById('myEchart2'))
      this.chart.setOption(option, true)
    },
    handleGetAlarmList () {
      let url = this.$base.getUrl('jiaAlarmCount')
      let params = {
        url: url,
        data: {
          'areaId': this.$route.params.deptId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.smokeAlarm = res.yggj
        this.fireHydrantAlarm = res.xfgj
        this.initEchart()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.warp {
  .title-bar {
    padding-bottom: 10px;
    border-bottom: 1px solid #465775;
    > div {
      display: inline-block;
    }
    .icon {
      vertical-align: text-top;
      margin-right: 10px;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}

.content {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 0 6px;
  .box {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: 20px;
    background-color: #212835;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    #myEchart2 {
      position: absolute;
      top: -15px;
      left: 50%;
      margin-left: -55px;
      width: 110px;
      height: 110px;
    }
    > div {
      span {
        display: block;
      }
      &:first-child {
        span {
          &:first-child {
            font-size: 20px;
            color: #b7e986;
          }
        }
      }
      &:last-child {
        span {
          &:first-child {
            font-size: 20px;
            color: #f77d18;
          }
        }
      }
    }
  }
}
</style>
